{#<!DOCTYPE html>#}
{% extends 'base.html' %}
{% load static %}
{% block title %}患者{% endblock %}

{% block body-context %}
{{ '' }}
    <body> <!--data-spy="scroll"  data-offset="40" data-target="#myScrollspy" -->
    <div class="container-fluid">
        <div class="row">
            <!-- 左边栏信息 -->
            <div id="myScrollspy" class="col-sm-3"> <!-- class="col-sm-3" -->
                <div class="container-fluid">
                    <div class="container-fluid">
                        <ul class="nav nav-pills nav-stacked">
                            <div>
                                <br/><br/>
                                <div class="card">
                                    <div class="card-body">
                                        <div class="widget-timeline-icon2">
                                            <ul class="timeline">
                                                <li>
                                                    <div class="icon bg-primary"><i class="las la-stethoscope"></i>
                                                    </div>
                                                    <a class="timeline-panel text-muted" href="#future">
                                                        <h4 class="mb-2 mt-1">待诊信息</h4>
                                                        <p class="fs-15 mb-0 ">z</p>
                                                    </a>
                                                </li>
                                                <li>
                                                    <div class="icon bg-primary"><i class="las la-stethoscope"></i>
                                                    </div>
                                                    <a class="timeline-panel text-muted" href="#now">
                                                        <h4 class="mb-2 mt-1">当前就诊</h4>
                                                        <p class="fs-15 mb-0 ">z</p>
                                                    </a>
                                                </li>
                                                <li>
                                                    <div class="icon bg-primary"><i class="las la-stethoscope"></i>
                                                    </div>
                                                    <a class="timeline-panel text-muted" href="#past">
                                                        <h4 class="mb-2 mt-1">就诊记录</h4>
                                                        <p class="fs-15 mb-0 ">his</p>
                                                    </a>
                                                </li>
                                                <li>
                                                    <div class="icon bg-primary las"><i class="las la-stethoscope"></i>
                                                    </div>
                                                    <a class="timeline-panel text-muted" href="#settings">
                                                        <h4 class="mb-2 mt-1">个人设置</h4>
                                                        <p class="fs-15 mb-0 ">name</p>
                                                    </a>
                                                </li>

                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 右边滚动栏信息，包括以下几部分 -->
            <div class="col-sm-8">

                <!-- 点击页面信息（初步想法是通过它可以进行页面间的跳转，以此保证每个患者自己有自己的主页） -->
                <div class="page-titles">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item active"><a href="javascript:void(0)">小A</a></li>
                        <li class="breadcrumb-item"><a href="javascript:void(0)">首页</a></li>
                    </ol>
                </div>

                <!--这里是医院对外的通知，尤其是相关的紧急通知之类的，比如疫情期间就可以发布一些防疫政策通知-->
                <div class="col-lg-12">
                    <div class="card patient-detail">
                        <div class="card-header border-0 pb-0">
                            <h4 class="fs-20 font-w600 text-white">Note for Patient</h4>
                        </div>
                        <div class="card-body fs-14 font-w300">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                            mollit anim id est laborum
                        </div>
                    </div>
                </div>

                <!--待诊信息（包括各种需要检查、复诊的状态信息，需要做的事情（较为急迫的事情）——其实还没太想好
                但可以确定的一点是，该card也是只可读，不能提交或者修改）-->
                <div class="col-lg-12" id="future">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">待诊信息</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-responsive-md">
                                    <thead>
                                    <tr>
                                        <th><p><strong>#</strong></p></th>
                                        <th><p><strong>序号</strong></p></th>
                                        <th><p style="width: 40px"><strong>科室</strong></p></th>
                                        <th><p style="width: 60px"><strong>门诊</strong></p></th>
                                        <th><p style="width: 60px"><strong>医生</strong></p></th>
                                        <th><p><strong>日期</strong></p></th>
                                        <th><p><strong>时间</strong></p></th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td><strong>01</strong></td>
                                        <td>1234</td>
                                        <td>内科</td>
                                        <td>呼吸门诊</td>
                                        <td>A医生</td>
                                        <td>2021-04-09</td>
                                        <td>13:00</td>
                                        <td>
                                            <button type="button" class="btn btn-success light sharp" href="#"
                                                    style="width: 80px">
                                                再次预约
                                            </button>
                                        </td>
                                    </tr>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!--当前就诊（包括目前就诊的时候医生需要你进行的所有未进行过的检查）-->
                <div class="col-lg-12" id="now">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">当前就诊</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-responsive-md">
                                    <thead>
                                    <tr>
                                        <th><p><strong>#</strong></p></th>
                                        <th><p><strong>名称</strong></p></th>
                                        <th><p style="width: 60px"><strong>地点</strong></p></th>
                                        <th><p style="width: 30px"><strong>序号</strong></p></th>
                                        <th><p><strong>状态</strong></p></th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td><strong>01</strong></td>
                                        <td>CT</td>
                                        <td>综合二层102</td>
                                        <td>189</td>

                                        <td><span class="badge light badge-danger">等待检查</span></td>
                                        {#                                                <td><span class="badge light badge-warning">等待结果</span></td>#}
                                        {#                                                <td><span class="badge light badge-success">已出结果</span></td>#}
                                        <td>
                                            <button type="button" class="btn btn-success light sharp" href="#"
                                                    style="width: 80px">
                                                详细信息
                                            </button>
                                        </td>
                                    </tr>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!--就诊记录（包括所有在该医院里边的就诊情况，包括确诊记录和检查记录，需要实现的需求就是
                1.当点击详情的时候能够弹出相应的详细信息
                2.每次确诊都必须有相应医生的记录，并允许点击再次预约挂号）-->
                <div class="col-lg-12" id="past">
                    <div class="card">
                        <div class="card-body">
                            <div class="profile-tab">
                                <div class="custom-tab-1">
                                    <!-- 上部导航栏信息 -->
                                    <ul class="nav nav-tabs">

                                        <li class="nav-item"><a href="#all-record" data-toggle="tab" class="nav-link">确诊记录</a>
                                        </li>
                                        <li class="nav-item"><a href="#all-check" data-toggle="tab"
                                                                class="nav-link">检查记录</a>
                                        </li>
                                    </ul>

                                    <!-- 下部展示信息，包括以下内容 -->
                                    <div class="tab-content">


                                        <!-- 确诊记录 -->
                                        <div id="all-record" class="tab-pane fade show active">
                                            <div class="profile-all-record">
                                                <div class="counter">
                                                    <div class="table-responsive">
                                                        <table class="table table-responsive-md">
                                                            <thead>
                                                            <tr>
                                                                <th><p><strong>#</strong></p></th>
                                                                <th><p style="width: 100px"><strong>日期</strong></p></th>
                                                                <th><p style="width: 60px"><strong>医生</strong></p></th>
                                                                <th><p style="width: 60px"><strong>确诊</strong></p></th>
                                                                <th></th>
                                                                <th></th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <tr>
                                                                <td><strong>01</strong></td>
                                                                <td>2020-04-09</td>
                                                                <td>A医生</td>
                                                                <td>肺炎</td>
                                                                <td>
                                                                    <button type="button"
                                                                            class="btn btn-success light sharp" href="#"
                                                                            style="width: 80px">
                                                                        再次预约
                                                                    </button>
                                                                </td>
                                                                <td>
                                                                    <button type="button"
                                                                            class="btn btn-success light sharp" href="#"
                                                                            style="width: 80px">
                                                                        确诊详情
                                                                    </button>
                                                                </td>
                                                            </tr>

                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- 检查记录 -->
                                        <div id="all-check" class="tab-pane fade">
                                            <div class="profile-all-check">
                                                <div class="counter">
                                                    <div class="table-responsive">
                                                        <table class="table table-responsive-md">
                                                            <thead>
                                                            <tr>
                                                                <th><p><strong>#</strong></p></th>
                                                                <th><p style="width: 60px"><strong>名称</strong></p></th>
                                                                <th><p style="width: 60px"><strong>价格</strong></p></th>
                                                                <th></th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <tr>
                                                                <td><strong>01</strong></td>
                                                                <td>B超</td>
                                                                <td>130</td>
                                                                <td>
                                                                    <button type="button"
                                                                            class="btn btn-success light sharp"
                                                                            data-toggle="modal"
                                                                            data-target="#myModal"
                                                                            style="width: 80px">
                                                                        结果详情
                                                                    </button>
                                                                </td>
                                                            </tr>

                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- 弹出框 需要进行一些简单的配置即可-->
                                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                                             aria-labelledby="myModalLabel" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal"
                                                                aria-hidden="true">
                                                            &times;
                                                        </button>
                                                        <h4 class="modal-title" id="myModalLabel">
                                                            检查结果
                                                        </h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        在这里添加一些文本
                                                        写下很多很多很多结果信息，或许可以放图片
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-primary"
                                                                data-dismiss="modal">确定
                                                        </button>
{#                                                        <button type="button" class="btn btn-default">#}
{#                                                            确定#}
{#                                                        </button>#}
                                                    </div>
                                                </div><!-- /.modal-content -->
                                            </div><!-- /.modal -->
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!--个人的设置信息（包括修改电话号码、邮箱、密码等等）-->
                <div class="col-lg-12" id="settings">
                    <div class="card">
                        <div class="card-body">
                            <div class="profile-tab">
                                <div class="custom-tab-1">
                                    <ul class="nav nav-tabs">
                                        <li class="nav-item"><a href="#about-me" data-toggle="tab"
                                                                class="nav-link active show">当前设置信息</a>
                                        </li>
                                        <li class="nav-item"><a href="#personal-settings" data-toggle="tab"
                                                                class="nav-link">修改信息</a>
                                        </li>

                                    </ul>
                                    <div class="tab-content">

                                        <div id="about-me" class="tab-pane fade active show">
                                            <div class="profile-about-me">
                                                <div class="pt-4 border-bottom-1 pb-3">
                                                    <h4 class="text-primary">About Me</h4>
                                                    <p class="mb-2">A wonderful serenity has taken possession of my
                                                        entire soul, like these sweet mornings of spring which I
                                                        enjoy
                                                        with my whole heart. I am alone, and feel the charm of
                                                        existence
                                                        was created for the bliss of souls like mine.I am so happy,
                                                        my
                                                        dear friend, so absorbed in the exquisite sense of mere
                                                        tranquil
                                                        existence, that I neglect my talents.</p>
                                                    <p>A collection of textile samples lay spread out on the table -
                                                        Samsa was a travelling salesman - and above it there hung a
                                                        picture that he had recently cut out of an illustrated
                                                        magazine
                                                        and housed in a nice, gilded frame.</p>
                                                </div>
                                            </div>
                                            <div class="profile-personal-info">
                                                <h4 class="text-primary mb-4">Personal Information</h4>
                                                <div class="row mb-2">
                                                    <div class="col-3">
                                                        <h5 class="f-w-500">Name <span class="pull-right">:</span>
                                                        </h5>
                                                    </div>
                                                    <div class="col-9"><span>Mitchell C.Shay</span>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-3">
                                                        <h5 class="f-w-500">Email <span class="pull-right">:</span>
                                                        </h5>
                                                    </div>
                                                    <div class="col-9"><span>example@examplel.com</span>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-3">
                                                        <h5 class="f-w-500">Availability <span
                                                                class="pull-right">:</span></h5>
                                                    </div>
                                                    <div class="col-9"><span>Full Time (Free Lancer)</span>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-3">
                                                        <h5 class="f-w-500">Age <span class="pull-right">:</span>
                                                        </h5>
                                                    </div>
                                                    <div class="col-9"><span>27</span>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-3">
                                                        <h5 class="f-w-500">Location <span
                                                                class="pull-right">:</span>
                                                        </h5>
                                                    </div>
                                                    <div class="col-9"><span>Rosemont Avenue Melbourne,
                                                                Florida</span>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-3">
                                                        <h5 class="f-w-500">Year Experience <span
                                                                class="pull-right">:</span></h5>
                                                    </div>
                                                    <div class="col-9"><span>07 Year Experiences</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="personal-settings" class="tab-pane fade">
                                            <div class="pt-3">
                                                <div class="settings-form">
                                                    <h4 class="text-primary">Account Setting</h4>
                                                    <form>
                                                        <div class="form-row">
                                                            <div class="form-group col-md-6">
                                                                <label>Email</label>
                                                                <input type="email" placeholder="Email"
                                                                       class="form-control">
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>Password</label>
                                                                <input type="password" placeholder="Password"
                                                                       class="form-control">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label>Phone</label>
                                                            <input type="text" placeholder="输入更新的手机号"
                                                                   class="form-control">
                                                        </div>

                                                        <button class="btn btn-primary" type="submit">重置
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


    <!-- 觉得maybe可以用上的组件 -->
    {#                <div class="d-md-flex d-block mb-3 align-items-center">#}
    {#                    <div class="widget-timeline-icon py-3 py-md-2 px-1 overflow-auto">#}
    {#                        <ul class="timeline">#}
    {#                            <li>#}
    {#                                <div class="icon bg-warning"></div>#}
    {#                                <a class="timeline-panel text-muted" href="javascript:void(0);">#}
    {#                                    <h4 class="mb-2 mt-0 text-warning fs-16 font-w600">Pending</h4>#}
    {#                                    <p class="fs-14 mb-0 ">21/08/2020, 12:45 AM</p>#}
    {#                                </a>#}
    {#                            </li>#}
    {#                            <li class="border-info">#}
    {#                                <div class="icon bg-info"></div>#}
    {#                                <a class="timeline-panel text-muted" href="javascript:void(0);">#}
    {#                                    <h4 class="mb-2 mt-0 text-info fs-16 font-w600">On Recovery</h4>#}
    {#                                    <p class="fs-14 mb-0 ">21/08/2020, 12:45 AM</p>#}
    {#                                </a>#}
    {#                            </li>#}
    {#                            <li>#}
    {#                                <div class="icon bg-primary"></div>#}
    {#                                <a class="timeline-panel text-muted" href="javascript:void(0);">#}
    {#                                    <h4 class="mb-2 text-primary mt-0 fs-16 font-w600">Recovered</h4>#}
    {#                                    <p class="fs-14 mb-0 ">21/08/2020, 12:45 AM</p>#}
    {#                                </a>#}
    {#                            </li>#}
    {#                        </ul>#}
    {#                    </div>#}
    {#                </div>#}


    {#    <div class="col-lg-12" id="record">#}
    {#                        <div class="card">#}
    {#                            <div class="card-body">#}
    {#                                <div class="profile-tab">#}
    {#                                    <div class="custom-tab-1">#}
    {#                                        <ul class="nav nav-tabs">#}
    {#                                            <li class="nav-item"><a href="#allergy" data-toggle="tab"#}
    {#                                                                    class="nav-link active show">过敏史</a>#}
    {#                                            </li>#}
    {#                                            <li class="nav-item"><a href="#others" data-toggle="tab"#}
    {#                                                                    class="nav-link">其他说明</a>#}
    {#                                            </li>#}
    {#                                        </ul>#}
    {##}
    {##}
    {#                                        <div class="tab-content">#}
    {##}
    {#                                            <div id="allergy" class="tab-pane fade active show">#}
    {#                                                <div class="profile-allergy">#}
    {#                                                    <div id="accordion-two" class="accordion accordion-danger-solid">#}
    {#                                                        <div class="accordion__item">#}
    {#                                                            <div class="accordion__header" data-toggle="collapse"#}
    {#                                                                 data-target="#bordered_collapseOne"><span#}
    {#                                                                    class="accordion__header--text">抗生素A过敏</span>#}
    {#                                                                <span class="accordion__header--indicator"></span>#}
    {#                                                            </div>#}
    {#                                                            <div id="bordered_collapseOne"#}
    {#                                                                 class="collapse accordion__body show"#}
    {#                                                                 data-parent="#accordion-two">#}
    {#                                                                <div class="accordion__body--text">#}
    {#                                                                    主要症状为长红斑#}
    {#                                                                </div>#}
    {#                                                            </div>#}
    {#                                                        </div>#}
    {#                                                        <div class="accordion__item">#}
    {#                                                            <div class="accordion__header collapsed"#}
    {#                                                                 data-toggle="collapse"#}
    {#                                                                 data-target="#bordered_collapseTwo"><span#}
    {#                                                                    class="accordion__header--text">菠萝过敏</span>#}
    {#                                                                <span class="accordion__header--indicator"></span>#}
    {#                                                            </div>#}
    {#                                                            <div id="bordered_collapseTwo"#}
    {#                                                                 class="collapse accordion__body"#}
    {#                                                                 data-parent="#accordion-two">#}
    {#                                                                <div class="accordion__body--text">#}
    {#                                                                    主要症状为发烧，起水泡#}
    {#                                                                </div>#}
    {#                                                            </div>#}
    {#                                                        </div>#}
    {#                                                        <div class="accordion__item">#}
    {#                                                            <div class="accordion__header collapsed"#}
    {#                                                                 data-toggle="collapse"#}
    {#                                                                 data-target="#bordered_collapseThree"><span#}
    {#                                                                    class="accordion__header--text">先天性心脏病</span>#}
    {#                                                                <span class="accordion__header--indicator"></span>#}
    {#                                                            </div>#}
    {#                                                            <div id="bordered_collapseThree"#}
    {#                                                                 class="collapse accordion__body"#}
    {#                                                                 data-parent="#accordion-two">#}
    {#                                                                <div class="accordion__body--text">#}
    {#                                                                    曾有一次昏厥症状#}
    {#                                                                </div>#}
    {#                                                            </div>#}
    {#                                                        </div>#}
    {#                                                    </div>#}
    {#                                                </div>#}
    {#                                            </div>#}
    {#                                            <div id="others" class="tab-pane fade">#}
    {#                                                <div class="profile-others">#}
    {#                                                    <div class="pt-4 border-bottom-1 pb-3">#}
    {#                                                        <h4 class="text-primary">其他说明</h4>#}
    {#                                                        <p class="mb-2">A wonderful serenity has taken possession of my#}
    {#                                                            entire soul, like these sweet mornings of spring which I#}
    {#                                                            enjoy#}
    {#                                                            with my whole heart. I am alone, and feel the charm of#}
    {#                                                            existence#}
    {#                                                            was created for the bliss of souls like mine.I am so happy,#}
    {#                                                            my#}
    {#                                                            dear friend, so absorbed in the exquisite sense of mere#}
    {#                                                            tranquil#}
    {#                                                            existence, that I neglect my talents.</p>#}
    {#                                                        <p>A collection of textile samples lay spread out on the table -#}
    {#                                                            Samsa was a travelling salesman - and above it there hung a#}
    {#                                                            picture that he had recently cut out of an illustrated#}
    {#                                                            magazine#}
    {#                                                            and housed in a nice, gilded frame.</p>#}
    {#                                                    </div>#}
    {#                                                </div>#}
    {#                                            </div>#}
    {##}
    {#                                        </div>#}
    {#                                    </div>#}
    {#                                </div>#}
    {#                            </div>#}
    {#                        </div>#}
    {#                    </div>#}


    </body>


{% endblock %}
